import Toast from './toast'

let currentToast

// 在vue上挂载$toast方法过程，
// 1.导出install方法，然后在使用出使用Vue.use(toastPlugin)
// 2.使用currentToast变量存储当前值，如果存在了一个toast，那么在触发另外一个toast的时候需要销毁当前toast
// 3.在body上挂载当前dom
// 4.监听关闭事件，一旦关闭销毁currentToast变量
// 5.将插槽变量变为message，在toast组件中使用slot展示message
export default {
  install (Vue, options) {
    Vue.prototype.$toast = function (message, toastOptions) {
      if (currentToast) {
        currentToast.close()
      }
      currentToast = createToast({
        Vue,
        message,
        propsData: toastOptions,
        onClose: () => {
          currentToast = null
        }
      })
    }
  }
}

function createToast ({ Vue, message, propsData, onClose }) {
  const Constructor = Vue.extend(Toast)
  const toast = new Constructor({ propsData })
  toast.$slots.default = [message]
  toast.$mount()
  toast.$on('close', onClose)
  document.body.appendChild(toast.$el)
  return toast
}
